<template>
	<view class="container">
		<!-- 顶部用户信息 -->
		<view class="user-header">
			<view class="user-avatar-section">
				<image class="user-avatar" src="/static/product2.png" mode="aspectFill" @click="changeAvatar"></image>
				<view class="user-info">
					<text class="user-name">{{ company.comName || '未设置昵称' }}</text>
					<text class="user-id">ID: {{ company.comId }}</text>
				</view>
			</view>
			<view class="certification-badge" @click="navigateTo('/pages/face-reg/face-reg')">
				<text class="certification-text">
					{{ formatState(company.comStatus) }}
				</text>
			</view>
		</view>

		<!-- 个人信息卡片 -->
		<view class="info-card">
			<view class="card-header">
				<text class="card-title">公司信息</text>
				<text class="edit-btn" @click="editInfo">编辑</text>
			</view>

			<view class="info-list">
				<view class="info-item">
					<text class="info-label">手机号码</text>
					<text class="info-value">{{ company.comPhone || '未绑定' }}</text>
				</view>

				<view class="info-item">
					<text class="info-label">邮箱</text>
					<text class="info-value">{{ company.comEmail || '未绑定' }}</text>
				</view>

				<view class="info-item">
					<text class="info-label">编号</text>
					<text class="info-value">{{ company.comNo || '未设置' }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">认证进度</text>
					<text class="info-value">{{ company.comRemark }}</text>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-card">
			<view class="menu-item" @click="navigateTo('/pages/order/order')">
				<view class="menu-left">
					<uni-icons type="cart" size="20" color="#ff6b6b"></uni-icons>
					<text class="menu-text">我的订单</text>
				</view>
				<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
			</view>

			<view class="menu-item" @click="navigateTo('/pages/address/address')">
				<view class="menu-left">
					<uni-icons type="location" size="20" color="#4facfe"></uni-icons>
					<text class="menu-text">收货地址</text>
				</view>
				<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
			</view>

			<view class="menu-item" @click="navigateTo('/pages/setting/setting')">
				<view class="menu-left">
					<uni-icons type="gear" size="20" color="#666"></uni-icons>
					<text class="menu-text">设置</text>
				</view>
				<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
			</view>
		</view>
		<!-- <view>{{ this.editForm }}</view> -->
		<!-- 退出登录按钮 -->
		<view class="logout-btn" @click="handleLogout">
			<text class="logout-text">退出登录</text>
		</view>

		<!-- 编辑信息弹窗 -->
		<uni-popup ref="editPopup" type="bottom">
			<view class="edit-popup">
				<view class="popup-header">
					<text class="popup-title">编辑公司信息</text>
					<uni-icons type="close" size="20" @click="closeEditPopup"></uni-icons>
				</view>

				<view class="form">
					<view class="form-item">
						<text class="form-label">公司名称</text>
						<input class="form-input" v-model="editForm.comName" placeholder="请输入真实姓名" />
					</view>

					<view class="form-item">
						<text class="form-label">手机号码</text>
						<input class="form-input" v-model="editForm.comPhone" placeholder="请输入手机号码" type="number" />
					</view>

					<view class="form-item">
						<text class="form-label">邮箱</text>
						<input class="form-input" v-model="editForm.comEmail" placeholder="请输入邮箱" type="email" />
					</view>
				</view>

				<view class="popup-actions">
					<button class="btn-cancel" @click="closeEditPopup">取消</button>
					<button class="btn-confirm" @click="updateCom">保存</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import lodash from 'lodash';
// import request from '../../api/http';
import { findCurrentCompany, modifyCurrentCompany } from '@/api/companyApi.js';
export default {
	data() {
		return {
			company: {
				comId: 53,
				comNo: 'xxxxx0zuoyoong',
				comName: '同源公司',
				comEmail: '3162217932@qq.com',
				comPhone: '15588788898',
				// comPwd: '123456',
				comTime: '2025-11-04T08:22:21',
				comRemark: '',
				comStatus: '4',
				comDel: '0',
				comCard: ''
			},
			editForm: {
				comName: '',
				comEmail: '',
				comPhone: '',
				comCard: ''
			},
			// 0 正常，1 停用，2 未激活，3 未实名, 4 待认证，5 已认证
			stateOptions: {
				0: '正常',
				3: '未实名',
				4: '待认证',
				5: '已认证'
			}
		};
	},

	onLoad() {
		this.loadInfo();
	},

	onShow() {
		// 页面显示时重新加载用户信息
		this.loadInfo();
	},

	methods: {
		// 加载用户信息
		async loadInfo() {
			// 模拟从缓存或接口获取用户信息
			// const userData = uni.getStorageSync('userInfo');
			// if (userData) {
			// 	this.userInfo = { ...this.userInfo, ...userData };
			// }
			// 初始化编辑表单
			// this.editForm = { ...this.userInfo };
			// const res = await request({
			// 	url: '/find/current'
			// });
			const res = await findCurrentCompany();
			console.log(res);
			this.company = { ...res };
			// this.editForm = { ...res };
			this.editForm = lodash.pick(res, Object.keys(this.editForm));
			// console.log(this.editForm)
		},

		// 编辑信息
		editInfo() {
			this.$refs.editPopup.open();
		},

		// 关闭编辑弹窗
		closeEditPopup() {
			this.$refs.editPopup.close();
		},

		// 保存用户信息
		async updateCom() {
			// 表单验证

			// 模拟保存到缓存
			try {
				// const res = await request({
				// 	url: '/modify/current',
				// 	method: 'put',
				// 	data: this.editForm
				// });
				const res = await modifyCurrentCompany(this.editForm);

				console.log(res);
				this.editForm = lodash.pick(res, Object.keys(this.editForm));
				// await this.loadInfo();
				Object.assign(this.company, this.editForm);
			} catch (error) {
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				});
				console.error(error);
			}

			this.closeEditPopup();
		},

		// 格式化性别显示
		formatState(state) {
			return this.stateOptions[state] || '未知';
		},

		// 页面跳转
		navigateTo(url) {
			uni.navigateTo({
				url: url
			});
		},

		// 退出登录
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 清除用户信息
						uni.removeStorageSync('token');

						uni.showToast({
							title: '退出成功',
							icon: 'success'
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 0;
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 顶部用户信息 */
.user-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 60rpx 30rpx 40rpx;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	color: white;
}

.user-avatar-section {
	display: flex;
	align-items: center;
}

.user-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	border: 4rpx solid rgba(255, 255, 255, 0.3);
	margin-right: 24rpx;
}

.user-info {
	display: flex;
	flex-direction: column;
}

.user-name {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.user-id {
	font-size: 24rpx;
	opacity: 0.8;
}

.certification-badge {
	background: rgba(255, 255, 255, 0.2);
	padding: 12rpx 24rpx;
	border-radius: 30rpx;
	backdrop-filter: blur(10px);
}

.certification-text {
	font-size: 24rpx;

	&.pending {
		color: #ffd700;
	}

	&.certified {
		color: #4cd964;
	}
}

/* 信息卡片 */
.info-card,
.menu-card {
	background: white;
	margin: 20rpx 30rpx;
	border-radius: 20rpx;
	padding: 0 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.card-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.edit-btn {
	font-size: 26rpx;
	color: #667eea;
}

/* 信息列表 */
.info-list {
	padding: 20rpx 0;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #f8f8f8;
}

.info-item:last-child {
	border-bottom: none;
}

.info-label {
	font-size: 28rpx;
	color: #666;
}

.info-value {
	font-size: 28rpx;
	color: #333;
	max-width: 60%;
	text-align: right;
}

/* 菜单项 */
.menu-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-left {
	display: flex;
	align-items: center;
}

.menu-text {
	font-size: 28rpx;
	color: #333;
	margin-left: 20rpx;
}

/* 退出登录按钮 */
.logout-btn {
	margin: 40rpx 30rpx;
	background: white;
	border-radius: 12rpx;
	padding: 28rpx;
	text-align: center;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.logout-text {
	font-size: 30rpx;
	color: #ff6b6b;
	font-weight: bold;
}

/* 编辑弹窗 */
.edit-popup {
	background: white;
	border-radius: 20rpx 20rpx 0 0;
	padding: 40rpx 30rpx;
	max-height: 80vh;
	overflow-y: auto;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40rpx;
}

.popup-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

/* 表单样式 */
.form-item {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.form-label {
	width: 160rpx;
	font-size: 28rpx;
	color: #333;
}

.form-input {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.form-picker {
	flex: 1;
}

.picker-text {
	font-size: 28rpx;
	color: #333;
}

.picker-text:empty::before {
	content: '请选择';
	color: #999;
}

/* 弹窗操作按钮 */
.popup-actions {
	display: flex;
	gap: 20rpx;
	margin-top: 40rpx;
}

.btn-cancel,
.btn-confirm {
	flex: 1;
	height: 80rpx;
	border-radius: 12rpx;
	font-size: 30rpx;
	border: none;
}

.btn-cancel {
	background: #f8f8f8;
	color: #666;
}

.btn-confirm {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
}
</style>
